Skip to content

feat(figma): add BannerAlert Code Connect and fix ButtonIcon node URL#1233

Open
georgewrmarshall wants to merge 1 commit into
mainfrom
feat/figma-code-connect-banner-alert
Open

feat(figma): add BannerAlert Code Connect and fix ButtonIcon node URL#1233
georgewrmarshall wants to merge 1 commit into
mainfrom
feat/figma-code-connect-banner-alert

Conversation

@georgewrmarshall

Copy link
Copy Markdown
Contributor

Description

Adds Figma Code Connect files for BannerAlert in both React and React Native, and fixes a stale Figma node URL in ButtonIcon for both platforms.

BannerAlert (9315-372)

  • New BannerAlert.figma.tsx for React and React Native
  • Maps severity enum (Info / Success / Warning / Danger) — Figma's "Neutral" variant falls through to the component default
  • Maps title and description string props
  • Intentionally omits Figma-only properties: has Art, has Title, is Dismissible, has Action

ButtonIcon (5226-5609, was 1:2860)

  • Updates stale node URL to current Figma component
  • Fixes prop name mismatches: 'isDisabled''disabled', 'variant''state' to match actual Figma property names

Related issues

Fixes:

Manual testing steps

  1. Open the BannerAlert Figma component in Dev Mode
  2. Verify the React and React Native code snippets appear in the Code Connect panel with correct severity/title/description props
  3. Open the ButtonIcon Figma component in Dev Mode
  4. Verify the code snippet reflects the correct size/isDisabled/variant props

Screenshots/Recordings

Before

  • ButtonIcon pointed to stale node 1:2860 (unmapped in Figma)
  • BannerAlert had no Code Connect files

After

  • ButtonIcon connected to 5226-5609 with correct prop mappings
  • BannerAlert connected to 9315-372 for both React and React Native

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable
  • I've documented my code using JSDoc format if applicable
  • I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

- Add BannerAlert.figma.tsx for React and React Native pointing to Figma
  node 9315-372; maps severity enum (Info/Success/Warning/Danger), title,
  and description
- Update ButtonIcon.figma.tsx for both platforms to point to current Figma
  node 5226-5609 (was stale 1:2860); fix prop names to match Figma
  ('disabled' → isDisabled, 'state' → variant)
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner June 13, 2026 02:02
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant